<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>传智健康</title>
    <meta name="description" content="传智健康">
    <meta name="keywords" content="传智健康">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->

    <style type="text/css">
        body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
        #l-map{height:300px;width:100%;}
        #r-result{width:100%; font-size:14px;line-height:20px;}
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=j385oopt9piMnWcoCmUTzCiZGTmPyDbC"></script>
    <style>
        .datatable {
            position: relative;
            box-sizing: border-box;
            -webkit-box-flex: 1;
            width: 100%;
            max-width: 100%;
            font-size: 14px;
            color: rgb(96, 98, 102);
            overflow: hidden;
            flex: 1 1 0%;
        }
        .datatable td, .datatable th {
            padding: 12px 0;
            min-width: 0;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            text-overflow: ellipsis;
            vertical-align: middle;
            position: relative;
            text-align: left;
        }
    </style>
</head>
<body class="hold-transition">
<div id="app">
<div id="r-result"> <input type="text" id="suggestId" size="20" placeholder="请输入查询地址"
                           style="width:400px;height: 28px" />&nbsp;&nbsp;&nbsp;
    <el-button type="primary" @click="add()" round>立即添加</el-button></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
<br/>
<div id="l-map" ></div>




</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }
    var lng1="";
    var lat1="";
    var value="";
    var map = new BMap.Map("l-map");
    map.centerAndZoom("南京",12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;


        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;

        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {
       //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });

    function clear() {
        $("#suggestId").val("");

    }
    var myGeo = new BMap.Geocoder();
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;
            lng1=pp.lng;
            lat1=pp.lat;
            //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
    var vue = new Vue({
        el: '#app',
        data:{

        },
        mounted: function() {

        },
        created(){
            findadress();

        },
        methods: {
            tomap() {
                window.location.href="map.html";

            },
            todetail(){
                window.location.href="detail.html";
            },
            function() {

            },
            add(){if (value==""||lng1==""||lat1==""){

                this.$message({
                    type:'error',
                    message:'亲，您还未指定地址，请指定'
                });
                return;
            }
            var parm={
                name: value,
                lng: lng1,
                lat :lat1
            };
                axios.post("/address/add.do",parm).then((res)=>{
                    if(res.data.flag) {
                        value="";
                        lng="";
                        lat="";
                        clear();
                       parent.vue.addsuccess();
                    } else {//失败的
                        //弹出提示信息
                        this.$message.error(res.data.message);
                    }
                });
            }

            }
    });
</script>
</html>

